<template>
<view class="search-wrapper" >
  <view class="search-icon-wrapper" @click="handleClickSearchButton">
    <image :src="searchIcon"/>
  </view>
  <uni-popup ref="popup" type="bottom" background-color="#fff">
    <view class="view-wrapper">
      <view class="view-item">
<!--        <view class="title-wrapper">开始时间</view>-->
<!--        <view class="input-wrapper">-->
<!--          <view class="uni-list-cell-db">-->
<!--            <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">-->
<!--              <view class="uni-input">{{date}}</view>-->
<!--            </picker>-->
<!--          </view>-->
<!--        </view>-->
        <view class="input-wrapper">
          <uni-datetime-picker v-model="dateList" type="datetimerange" >
            <view class="solt-wrapper">
              <view class="title-wrapper">开始时间</view>
              <view>{{dateList?dateList[0]:''}} &nbsp;></view>
            </view>
          </uni-datetime-picker>
        </view>

      </view>
      <view class="view-item">
        <view class="input-wrapper">
          <uni-datetime-picker v-model="dateList" type="datetimerange" >
            <view class="solt-wrapper">
              <view class="title-wrapper">结束时间</view>
              <view>{{dateList?dateList[1]:''}} &nbsp;></view>
            </view>
          </uni-datetime-picker>
        </view>
      </view>
      <view class="view-item">
        <view class="title-wrapper">学生姓名:</view>
        <view class="input-wrapper">
          <input v-model="queryData.data.stuName" style="width:100%;text-align: end;"/>
        </view>
      </view>
      <view class="view-item">
        <view class="title-wrapper">学生学号:</view>
        <view class="input-wrapper">
          <input v-model="queryData.data.stuCode" style="width:100%;text-align: end;"/>
        </view>
      </view>
      <view class="view-item">
        <picker style="width: 100%" @change="bindPickerChange" :value="collageName" :range="collageNameList">
          <view class="input-wrapper">
            <view class="solt-wrapper">
              <view class="title-wrapper">所在院系</view>
              <view style="max-width: 70%;display: flex;align-items: center"><view>{{collageName}}</view> &nbsp;></view>
            </view>
          </view>
        </picker>
      </view>
      <view class="view-item">
        <picker style="width: 100%" @change="bindClassPickerChange" :value="className" :range="classNameList">
          <view class="input-wrapper">
            <view class="solt-wrapper">
              <view class="title-wrapper">所在班级</view>
              <view style="max-width: 70%;height: auto;display: flex;align-items: center"><view>{{className}}</view> &nbsp;></view>
            </view>
          </view>
        </picker>
      </view>
      <view class="view-item" @click="handleSubSearchButton">
        <view class="title-wrapper" style="color: #054ECF;font-size: 18px;font-weight: 600">确认筛选</view>
        <view> > </view>
      </view>
      <view class="view-item" @click="handleResetSearchButton">
        <view class="title-wrapper" style="color: #F21E06;font-size: 18px;font-weight: 600">重置条件</view>
        <view> > </view>
      </view>
    </view>

  </uni-popup>
</view>
</template>

<script lang="ts" setup>
import {ref,defineEmits,defineExpose,defineProps,reactive} from 'vue'
import searchIcon from '@/static/clock-history.svg'
import uniPopup from "@/components/uni-popup/uni-popup.vue";
import uniDatetimePicker from "@/components/uni-datetime-picker/uni-datetime-picker.vue";
import {getRecordClassList, getRecordCollageList} from "@/api/api";
const showSearch=ref(false)
const popup=ref()
const emits=defineEmits(['subData'])
// const date=ref('2024-07-15')
// const startDate=ref()
// const endDate=ref()
// const bindDateChange=(e:any)=>{
//   date.value=e.detail.value;
//   console.log(e)
// }
const collageList=ref([] as any[])
const collageNameList=ref([] as any[])
const classNameList=ref([] as any[])
const classList=ref([] as any[])
const dateList=ref()
const startDate=ref()
const endDate=ref()
const queryData=reactive({
  data:{
    stuCode:'',
    startDate:'',
    endDate:'',
    stuName:'',
    collageId:'',
    classId:''

  }
})
const stuCode=ref()
const stuName=ref()
const testArray=ref([
  '中医院','西医院西医院西医院西医院西医院西医院西医院西医院西医院西医院西医院西医院西医院'
])
const testData=ref()
const handleClickSearchButton=()=>{
  collageNameList.value=[]
  collageList.value=[]
  getRecordCollageList().then(e=>{
    if(e.code===200){
      e.data.forEach((item:any)=>{
        collageNameList.value.push(item.deptName)
      })
      collageList.value=e.data
    }
  })
  popup?.value.open()
}
const collageName=ref()
const className=ref()
const  bindPickerChange=(e:any)=>{
  collageName.value=collageNameList.value[e.detail.value]
  console.log(collageList.value)
  queryData.data.collageId=collageList.value.filter(e=>e.deptName===collageName.value)[0].deptId
  queryData.data.classId=''
  className.value=''
  getRecordClassList({parentId:queryData.data.collageId}).then(res=>{
    if(res.code===200){
      res.data.forEach((item:any)=>{
        classNameList.value.push(item.deptName)
      })
      classList.value=res.data
    }
  })
}
const bindClassPickerChange=(e:any)=>{
  className.value=classNameList.value[e.detail.value]
  console.log(classList.value)
  queryData.data.classId=classList.value.filter(e=>e.deptName===className.value)[0].deptId
}
const handleResetSearchButton=()=>{
  queryData.data={
    stuCode:'',
    startDate:'',
    endDate:'',
    stuName:'',
    collageId:'',
    classId:''
  }
  testData.value=''
  stuCode.value=''
  stuName.value=''
  dateList.value=[]
  className.value=''
  collageList.value=[]
  classNameList.value=[]
  classList.value=[]
  collageNameList.value=[]
  collageName.value=''
}
const handleSubSearchButton=()=>{
  queryData.data.startDate=dateList.value?dateList.value[0]:''
  queryData.data.endDate=dateList.value?dateList.value[1]:''
  emits('subData',queryData)
  popup.value.close()
}
defineExpose({
  handleResetSearchButton
})
</script>

<style scoped lang="scss">
.search-wrapper{
  .search-icon-wrapper{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .view-wrapper{
    width: 100%;
    .view-item{
      max-width: 100%;
      display: flex;
      align-items: center;
      min-height: 2.5rem;
      padding-left: 10px;
      padding-right: 10px;
      justify-content: space-between;
      border-bottom: 1px silver solid;
      .title-wrapper{
        min-width: 5rem;
      }
      .input-wrapper{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .uni-list-cell-db{
          width: 100%;
        }
        .solt-wrapper{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
